<template>
  <div class="main-home-container">
    <!-- 导航栏 -->
    <el-row class="nav">
      <el-col :span="16">
        <el-menu
          router
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#fff"
          text-color="black"
          active-text-color="#ffd04b"
          :unique-opened="true"
          @open="handleOpen"
          @close="handleClose"
          menu-trigger="hover"
        >
          <el-menu-item>
            <img src="@/images/icon.jpg" alt style="width:50px;">
          </el-menu-item>
          <el-menu-item index="/home/homeIndex">首页</el-menu-item>
          <el-menu-item index="/home/homemain">社区</el-menu-item>
          <el-menu-item index="/home/homemain" v-show="focus">关注</el-menu-item>
          <el-menu-item index="/home/activity">活动</el-menu-item>

          <el-submenu index="3">
            <template slot="title">
              <router-link to="/home/find" tag="li">
                <i class="el-icon-location"></i>
                <span>发现</span>
              </router-link>
            </template>
            <el-menu-item index="/home/find/tabs">标签</el-menu-item>
            <el-menu-item index="/home/find/photographer">摄影师</el-menu-item>
            <el-menu-item index="/home/find/teach">教程</el-menu-item>
            <el-menu-item index="/home/find/cramer">器材</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <router-link to="/home/group" tag="li">
                <i class="el-icon-location"></i>
                <span>交流</span>
              </router-link>
            </template>
            <el-menu-item index="/home/talk">论坛</el-menu-item>
            <el-menu-item index="/home/group">小组</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <router-link to="/home/vip" tag="li">
                <i class="el-icon-location"></i>
                <span>更多</span>
              </router-link>
            </template>
            <el-menu-item index="/home/vip">供稿</el-menu-item>
            <el-menu-item index="/home/cooper">商务合作</el-menu-item>
            <el-menu-item index="/home/problem">意见反馈</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <!-- 搜索框 -->
      <el-col :span="3" id="query-box">
        <el-input size="small" placeholder="请输入内容" v-if="showquery" v-model="inputinfo"></el-input>
        <el-button
          icon="el-icon-search"
          circle
          v-else
          @click.prevent="showquery=true"
          style="float:right;"
        ></el-button>
      </el-col>
      <!-- 登录按钮，登录后切换成个人信息 -->
      <el-col :span="4" :offset="1" id="login-register" v-if="iflogin">
        <el-button @click.prevent="show">登录</el-button>
        <el-button type="warning">注册</el-button>
      </el-col>
      <el-col :span="5" v-else>
        <personal-info></personal-info>
      </el-col>
    </el-row>
    <!-- 内容区域 -->
    <el-row class="main-container">
      <el-col :span="24">
        <router-view></router-view>
      </el-col>
      <to-top></to-top>
    </el-row>
    <!-- 底部区域 -->
    <el-col :span="24" class="footer">
      <footer-info></footer-info>
    </el-col>
    <el-dialog class="dialog" :visible.sync="login" width="30%">
      <span slot="title" class="dialog-title">
        <span id="titl">登录</span>&nbsp;
        <span id="torestiger">还没有账号，
          <a href="#" @click="toreg">去注册</a>
        </span>
      </span>
      <div class="dialog-body">
        <el-form label-width="50px" :model="form" :rules="rules">
          <el-form-item label="登录" prop="name">
            <el-input autocomplete="off" v-model="form.name" placeholder="请输入账号，手机号或邮箱"></el-input>
            <span>请输入账号，手机号或邮箱</span>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input autocomplete="off" v-model="form.pass" show-password placeholder="请输入正确密码"></el-input>
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <button
          class="mui-btn mui-btn-warning mui-btn-outlined"
          style="width:100%;height:50px;font-size:20px;letter-spacing:5px; "
          @click.prevent="tologin(form)"
        >登录</button>
      </span>
    </el-dialog>
    <el-dialog class="dialog" :visible.sync="register" width="30%">
      <span slot="title" class="dialog-title">
        <span id="titl">注册</span>&nbsp;
        <span id="torestiger">已有账号，
          <a href="#" @click="tolog">去登录</a>
        </span>
      </span>
      <div class="dialog-body">
        <el-form label-width="80px" :model="form" :rules="rules">
          <el-form-item label="登录" prop="name">
            <el-input autocomplete="off" v-model="form.name" placeholder="请输入账号，手机号或邮箱"></el-input>
            <span>请输入账号，手机号或邮箱</span>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input autocomplete="off" v-model="form.pass" show-password placeholder="请输入正确密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="pass">
            <el-input autocomplete="off" v-model="form.pass" show-password placeholder="请输入正确密码"></el-input>
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <button
          class="mui-btn mui-btn-warning mui-btn-outlined"
          style="width:100%;height:50px;font-size:20px;letter-spacing:5px; "
        >注册</button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PersonalInfo from "@/subcomponents/personalinfo.vue";
import FooterInfo from "@/subcomponents/footer.vue";
import ToTop from "@/subcomponents/toTop.vue";
import MyButton from "@/components/photoInfo/myButton.vue";
export default {
  data() {
    return {
      activeIndex: "1",
      tabPosition: "top",
      inputinfo: "",
      iflogin: true,
      showquery: false,
      focus: false,
      login: false,
      register: false,
      checked: true,
      form: {
        name: "",
        pass: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入账号，手机号或邮箱",
            trigger: "blur"
          },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        pass: [
          { required: true, message: "请输入正确密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted: function(){
    this.login_()
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    show() {
      this.login = true;
    },
    tologin(user) {
      this.login = false;
      this.iflogin = !this.iflogin;
      this.focus = true;
      localStorage.setItem("user", JSON.stringify(user));
    },
    login_(){
      var user = JSON.parse(localStorage.getItem('user'));
      if(user!=''){
        this.iflogin=true
        this.focus = true;
      }
    },
    tolog() {
      this.register = false;
      this.login = true;
    },
    toreg() {
      this.login = false;
      this.register = true;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  components: {
    PersonalInfo,
    FooterInfo,
    ToTop,
    MyButton
  }
};
</script>

<style <style lang="scss" scoped>
.main-home-container {
  margin-top: 66px;

  .nav {
    width: 100%;
    position: fixed;
    top: 0;
    padding-bottom: 0;
    z-index: 5000;
    font-size: 18px;
    letter-spacing: 1.5px;
    font-weight: bold;
    border-bottom: solid 1px #e6e6e6;
    background-color: #fff;
    .el-menu-demo {
      border-bottom: solid 1px #fff;
      height: 66px;
    }
    #query-box {
      padding-top: 13px;
      .el-input-group__append {
        background-color: #fff;
      }
    }
    #login-register {
      padding-top: 10px;
    }
  }
  .dialog {
    .dialog-title {
      display: flex;
      justify-content: space-between;
      #titl {
        margin-left: 10px;
        font-size: 20px;
        letter-spacing: 2px;
        font-weight: bold;
      }
      #torestiger {
        margin-right: 30px;
        font-size: 16px;
        letter-spacing: 1.5px;
      }
    }
    .el-dialog__body {
      padding-bottom: 0;
    }
    .dialog-body {
      padding-bottom: 0;
    }
    button:hover {
      background-color: rgb(255, 196, 0);
      color: #fff;
    }
  }
}
</style>

